<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <script>
        (function(window, undefined) {
            var jQuery = function(selector) {
                return new jQuery.fn.init(selector);
            }
            jQuery.fn = jQuery.prototype = {
                constructor: jQuery,
                init: function(selector) {
                    var elements = document.querySelectorAll(selector);
                    [].push.apply(this, elements);
                },
                css: function(name, value) {
                    // console.log('css is ok');
                    if (arguments.length === 2) {
                        // console.log(name, value);
                        for (var i = 0; i < this.length; i++) {
                            // console.log(this[i]);
                            // 坑：style.name=value 设置name的值
                            // name是变量，需要用[]
                            this[i].style[name] = value;
                        }
                    } else if (arguments.length === 1) {
                        if (typeof name === 'object') {
                            for (var i = 0; i < this.length; i++) {
                                // 遍历对象
                                for (k in name) {
                                    // k为键
                                    // name[k] 对应的值
                                    this[i].style[k] = name[k];
                                }
                            }
                        } else if (typeof name === 'string') {
                            return window.getComputedStyle(this[0], null)[name];
                        }
                    }
                    return this;
                },
                addClass: function(name) {
                    // 添加name类名
                    for (var i = 0; i < this.length; i++) {
                        this[i].classList.add(name);
                    }
                    return this;
                },
                removeClass: function(name) {
                    // 删除类名
                    for (var i = 0; i < this.length; i++) {
                        this[i].classList.remove(name);
                    }
                    return this;
                },
                hasClass: function(name) {
                    // 判断是否有指定类型
                    for (var i = 0; i < this.length; i++) {
                        if (this[i].classList.contains(name)) {
                            return true;
                        }
                        return false;
                    }
                },
                toggleClass: function(name) {
                    for (var i = 0; i < this.length; i++) {
                        if (this[i].classList.contains(name)) {
                            this[i].classList.remove(name);
                        } else {
                            this[i].classList.add(name);
                        }
                    }
                    return this;
                },
            }


            // 把init的原型对象替换成jquery的原型对象
            jQuery.fn.init.prototype = jQuery.fn;
            // 暴露
            window.jQuery = window.$ = jQuery;
        })(window)

        var $divs = $('div');
        console.log($divs);

        $divs.css('color', 'lime'); //设置单个样式
        $divs.css('color'); //获取样式
        console.log($divs.css('color'));
        $divs.addClass('one');
        $divs.addClass('two');
        $divs.addClass('three');
        console.log($divs.hasClass('o2ne'));
        $divs.toggleClass('one');
    </script>
</body>

</html>